<template>
  <div>
    <br>
    <el-row>
      <el-col span="4">
        <el-button type="success" @click="btnInsertUser" size="small">新增员工</el-button>
      </el-col>
      <el-col span="10">
        <span>所在生产线：</span>
        <el-select @change="btnSearch" size="small" clearable v-model="flowOptsCon" placeholder="请选择生产线">
          <el-option v-for="item in flowOptsConSel" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-col>
      <el-col span="6">
        姓名：
        <el-input @input="btnSearch" clearable v-model="usernameSearch" size="small" style="width: 120px;"
                  placeholder="请输入姓名"></el-input>
      </el-col>
      <el-col span="4">
        <el-button type="success" size="small" @click="btnSearch">查询</el-button>
      </el-col>
    </el-row>
    <el-table
      v-loading="loading"
      element-loading-text="拼命加载中"
      :data="peopleList"
      stripe
      style="width: 100%">
      <el-table-column
        type="index"
        label="序号"
        width="120">
      </el-table-column>
      <el-table-column
        prop="userId"
        label="工号"
        width="120">
      </el-table-column>
      <el-table-column
        prop="username"
        label="姓名"
        width="120">
      </el-table-column>
      <el-table-column
        prop="flowId"
        width="160"
        label="所在生产线">
      </el-table-column>
      <el-table-column
        prop="sex"
        width="120"
        label="性别">
        <template slot-scope="scope">
            <span v-if="scope.row.sex == '2'">
              女
            </span>
          <span v-if="scope.row.sex == '1'">
              男
            </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="phone"
        width="120"
        label="手机号码">
      </el-table-column>
      <el-table-column
        prop="addr"
        width="100"
        label="地址">
      </el-table-column>
      <el-table-column
        width="350"
        fixed="right"
        label="操作"
      >
        <template slot-scope="scope">
          <el-row>
              <el-button icon="el-icon-search" size="small" @click="editUserInfo(scope.row.id,1)">详情</el-button>
              <el-button type="primary" icon="el-icon-edit" size="small" @click="editUserInfo(scope.row.id,2)">编辑
              </el-button>
              <el-button type="danger" icon="el-icon-delete" size="small" @click="deleteUserInfo(scope.row.id)">删除
              </el-button>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        :page-size="params.size"
        :current-page.sync="params.page"
        style="float: right;"
        layout="total, prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :total="total">
      </el-pagination>
    </div>
    <el-dialog width="600px" title="员工信息" :visible.sync="dialogFormVisible">
      <el-form ref="form" :rules="rules" :model="form">
        <el-row>
          <el-col span="12">
            <el-form-item prop="username" label="员工姓名：" :label-width="formLabelWidth">
              <el-input :disabled="form.isUserName" size="small" clearable v-model="form.username"
                        autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col span="12">
            <el-form-item prop="password" label="初始化密码：" :label-width="formLabelWidth">
              <el-input :disabled="form.isPassword" show-password type="password" size="small" placeholder="请输入密码"
                        v-model="form.password"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col span="12">
            <el-form-item prop="userId" label="员工编号：" :label-width="formLabelWidth">
              <el-input :disabled="form.isUserId" size="small" clearable v-model="form.userId"
                        autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col span="12">
            <el-form-item label="角色：" :label-width="formLabelWidth">
              <el-radio-group :disabled="form.isRoleId" v-model="form.roleId">
                <el-radio label="1" value="1">经理</el-radio>
                <el-radio label="2" value="2">员工</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col span="12">
            <el-form-item label="手机号码：" :label-width="formLabelWidth">
              <el-input size="small" :disabled="form.isPhone" clearable v-model="form.phone"
                        autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col span="12">
            <el-form-item label="地址：" :label-width="formLabelWidth">
              <el-input :disabled="form.isAddr" size="small" clearable v-model="form.addr"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item prop="flowId" label="生产线：" :label-width="formLabelWidth">
              <el-select :disabled="form.isFlowId" size="small" v-model="form.flowId" placeholder="请选择生产线">
                <el-option v-for="item in flowOpts" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" align="center" class="dialog-footer">
        <el-button :disabled="form.isBtnDialog" @click="dialogFormVisible = false">取 消</el-button>
        <el-button :disabled="form.isBtnDialog" type="primary" @click="btnSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import ElRow from "element-ui/packages/row/src/row";
  import * as cmsApi from '../api/cms'

  export default {
    components: {
      ElRow
    },
    data() {
      return {
        loading: false,
        peopleList: [],
        personName: '',
        flowOptsCon: '',
        usernameSearch: '',
        flowOptsConSel: [],
        total: 0,
        params: {
          page: 1,
          size: 5
        },
        // 个数选择器（可修改）
        pageSizes: [1, 2, 3, 4],
        dialogTableVisible: false,
        dialogFormVisible: false,
        form: {
          isUserId: false,
          isUserName: false,
          isPassword: false,
          isRoleId: false,
          isPhone: false,
          isAddr: false,
          isFlowId: false,
          isBtnDialog: false,
          id: '',
          username: '',
          password: '',
          userId: '',
          roleId: '2',
          phone: '',
          addr: '',
          flowId: '',
        },
        formLabelWidth: '120px',
        flowOpts: [],
        // 表单验证，需要在 el-form-item 元素中增加 prop 属性
        rules: {
          username: [
            {required: true, message: '账号不可为空', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '密码不可为空', trigger: 'blur'}
          ],
          userId: [
            {required: true, message: '员工编号不可为空', trigger: 'blur'}
          ],
          flowId: [
            {required: true, message: '生产线不可为空', trigger: 'blur'}
          ],
        },
      };
    },
    methods: {

      editUserInfo(id, flag) {
        this.form.id = ''
        this.form.username = ''
        this.form.password = ''
        this.form.userId = ''
        this.form.roleId = '2'
        this.form.phone = ''
        this.form.addr = ''
        this.form.flowId = ''
        if (flag == 1) {
          this.showDialog(id)
          this.dialogFormVisible = true
          this.form.isBtnDialog = true
          this.disableAllEle()
        } else if (flag == 2) {
          this.showDialog(id)
          this.dialogFormVisible = true
          this.form.isBtnDialog = false
          this.form.isPassword = false
          this.form.isPhone = false
          this.form.isAddr = false
          this.disableSomeEle()
        }
      },
      deleteUserInfo(id) {
        this.$confirm('删除该员工, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var params = {id: id}
          cmsApi.deleteUserInfo(params).then((res) => {
            if (res.success == true) {
              this.$message({
                type: 'success',
                message: res.message
              });
            }else {
              this.$message({
                type: 'error',
                message: res.message
              });
            }
          })
          this.params.page = 1
          this.userinfoPage(this.params.page, this.params.size)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },

      userinfoPage(pageNum, pageSize) {
        this.loading = true
        var params = {
          pageNum: pageNum,
          pageSize: pageSize,
          flowId: this.flowOptsCon,
          username: this.usernameSearch
        }
        cmsApi.userinfoPage(params).then((res) => {
          if (res.success == true) {
            this.peopleList = res.object.list
            this.total = res.object.total
            this.loading = false
          }else {
            this.$router.push("/login");
          }
        })
      },

      //新增员工按钮
      btnInsertUser() {
        this.initForm()
        this.dialogFormVisible = true
      },
      initForm() {
        this.form.id = ''
        this.form.username = ''
        this.form.password = ''
        this.form.userId = ''
        this.form.roleId = '2'
        this.form.phone = ''
        this.form.addr = ''
        this.form.flowId = ''
        this.form.isUserId = false
        this.form.isUserName = false
        this.form.isPassword = false
        this.form.isRoleId = false
        this.form.isPhone = false
        this.form.isAddr = false
        this.form.isFlowId = false
        this.form.isBtnDialog = false
      },

      //确定按钮
      btnSubmit() {
        // 为表单绑定验证功能
        this.$refs['form'].validate((valid) => {
          if (valid) {
            cmsApi.insertOrUpadte(this.form).then((res) => {
              if (res.success == true) {
                this.initForm()
                this.dialogFormVisible = false
                this.params.page = 1
                this.userinfoPage(this.params.page, this.params.size)
                this.$notify({
                  title: '系统提示',
                  message: res.message,
                  type: 'success',
                  duration: 1500
                });
              } else {
                this.initForm()
                this.dialogFormVisible = false
                this.$notify.error({
                  title: '系统提示',
                  message: res.message,
                  duration: 1500
                });
              }
            })
          } else {
            this.$notify.error({
              title: '系统提示',
              message: '请先填写必填项！',
              duration: 2000
            });
          }
        })
      },
      flowSel() {
        cmsApi.flowSel().then((res) => {
          if (res.success == true) {
            this.flowOpts = res.object
            this.flowOptsConSel = res.object
          }
        })
      },
      handleSizeChange(val) {
        // 改变每页显示的条数
        this.params.size = val
        // 点击每页显示的条数时，显示第一页
        this.userinfoPage(1, this.params.size)
        // 注意：在改变每页显示的条数时，要将页码显示到第一页
        this.params.page = 1
      },
      handleCurrentChange(val) {
        // 改变默认的页数
        this.params.page = val
        // 切换页码时，要获取每页显示的条数
        this.userinfoPage(this.params.page, this.params.size)
      },
      btnSearch() {
        this.userinfoPage(this.params.page, this.params.size)
      },
      showDialog(id) {
        var params = {id: id}
        cmsApi.selectUserInfoVOByPrimary(params).then((res) => {
          if (res.success == true) {
            this.form.id = res.object.id
            this.form.username = res.object.username
            this.form.password = res.object.password
            this.form.userId = res.object.userId
            this.form.roleId = res.object.roleId
            this.form.phone = res.object.phone
            this.form.addr = res.object.addr
            this.form.flowId = res.object.flowId
            this.$refs['form'].validate()
          }
        })
      },
      disableAllEle() {
        this.form.isPassword = true
        this.form.isPhone = true
        this.form.isAddr = true
        this.disableSomeEle()
      },
      disableSomeEle() {
        this.form.isUserId = true
        this.form.isUserName = true
        this.form.isRoleId = true
        this.form.isFlowId = true
      },
      checkRole(){
       cmsApi.checkRole().then((res)=>{
           if(res.success == true){
             //加载生产线下拉列表
             this.flowSel()
             this.userinfoPage(this.params.page, this.params.size)
           }else {
             this.$notify.error({
               title: '系统提示',
               message: res.message,
               duration: 3000
             });
             this.$router.push("/baseinfo/page/person_info");
           }
       })
      }

    },
    mounted() {
      this.checkRole()
    }
  };
</script>

<style>


</style>
